<template>
    <div>
        <h1>额外的 ref 解包细节</h1>
        <div>{{ shujiyuan }}</div>
        <div>
            <h3>v-for嵌套</h3>
            <div>
                <div v-for="(item, index) in shujiyuan" :key="index">
                    {{ item }}

                    <ul>
                        <li v-for="(itemIn, index) in item" :key="index">{{ itemIn }}</li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo34'
}
</script>

<script setup lang='ts'>
import { reactive, ref } from 'vue';


const count = ref(0)
const state = reactive({
    count: count,
    countVal: count.value
})

console.log(state.count); // 0
state.count = 100
console.log(state.count); // 100
console.log(count.value); // 100
console.log(count);

console.log('------------------');

state.countVal = 200
console.log(state.countVal); // 200
console.log(count.value); // 100
console.log(count);

// 1、一个ref对象赋值 ‘响应式对象的属性’，是把 ‘整个ref对象’赋值过去了，而不是ef的valuer

// 2、一个ref会在作为响应式对象的属性被访问或修改是自动解包。换句话说，他的行为就像一个普通的属性

// 数组和集合的注意事项
// 与reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型（如 Map）中的元素被访问时，它不会被解包

const books = reactive([ref('vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value);

const map = reactive(new Map([['count', ref(0)]]))
console.log(map.get('count')?.value);

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

const myObject = reactive({
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
})

const shujiyuan = ref({
    items,
    myObject
})


</script>

<style></style>